<template>
    <div class="content">
        <h1>{{props.LD}}:</h1>
        <ul>
            <li :class="{active:(liValue =='')}" @click="cancal">全部</li>
            <li v-for="(item,index) in data" :key="item.value"  @click="change(item.value,index)" :class="{active:(liValue ==item.value)}">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onBeforeMount } from 'vue'
import { getDistLv } from "@/api/hospital/index";
import type { distLvType, distLvList } from "@/api/hospital/type"
// 定义自定义事件
let $emit = defineEmits(["getLevel","getDist","clickH"]);

let data = ref<distLvList>();
// 存储数据li的value 判断高亮
let liValue = ref<string>("")
// 存储被点击h1的内容
let butCon = ref<string>('')

onMounted(() => {
    getDL()
})

const getDL = async () => {
    let result: distLvType = await getDistLv(props.data);
    data.value = result.data
}


// 改变高亮
const change = (str:string,index:number) => { 
    liValue.value = str
    //@ts-ignore
    if (data.value[index].id < 110101) {
        $emit("getLevel", liValue.value)
    } else { 
        $emit("getDist", liValue.value)
    }

}
const cancal = () => { 
    liValue.value = ""
    butCon.value = props.LD
    $emit("clickH",butCon.value)
}




const props = defineProps(["data","LD"])

</script>

<script lang="ts">
export default {
    name: "hospital"
}
</script>

<style lang="scss" scoped>
.content {
    font-size: 15px;
    font-weight: 900;
    color: #ccc;
    margin-top: 10px;
    display: flex;

    h1 {
        width: 36px;
        padding-top: 5px;
    }

    ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding-top: 5px;

        li {
            margin-left: 10px;
            display: flex;
            padding-bottom: 10px;
        }
        li:hover{
            cursor: pointer;
        }


    }
}
.active{
    color:rgb(143,187, 255)
}
</style>